<template>
  <div>
    <div style="">
      <el-button >数据查询</el-button>
 </div>

  
<div style="width=100%; margin-top:20px;">
      <div style="width: 50%; float: left">
        <el-form
          ref="form"
          :rules="rules"
          :model="obj"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="省份" prop="province">
            <el-input v-model="obj.province"></el-input>
          </el-form-item>
          <el-form-item label="城市" prop="city">
            <el-input v-model="obj.city"></el-input>
          </el-form-item>
          <el-form-item label="区域" prop="area">
            <el-input v-model="obj.area"></el-input>
          </el-form-item>
          <el-form-item label="录入时间" prop="inputTime">
            <el-input v-model="obj.inputTime"></el-input>
          </el-form-item>
          
        </el-form>
      </div>

      <div
        id="提示"
        style="width: 48%; float: right; color: red; font-weight: 800;"
      >
        <div>温馨提示：</div>
        <div>1.先填入查询信息，才能查看相关数据</div>
      </div>
    </div>


    <el-table
      :data="dataSearch.list"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column align="center" fixed="left" prop="id" label="编号">
      </el-table-column>
      <el-table-column align="center" prop="country" label="国家">
      </el-table-column>
      <el-table-column align="center" prop="province" label="省份">
      </el-table-column>
      <el-table-column align="center" prop="city" label="城市">
      </el-table-column>
      <el-table-column align="center" prop="area" label="区域">
      </el-table-column>
      <el-table-column align="center" prop="confirmed" label="确诊人数">
        <template v-slot="scope">
          <el-tag type="danger">
            {{ scope.row.confirmed }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="suspected" label="疑似">
        <template v-slot="scope">
          <el-tag type="warning">
            {{ scope.row.suspected }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="dead" label="死亡人数">
        <template v-slot="scope">
          <el-tag type="danger">
            {{ scope.row.dead }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="cure" label="治愈人数">
        <template v-slot="scope">
          <el-tag type="success">
            {{ scope.row.cure }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="severe" label="所有确诊">
        <template v-slot="scope">
          <el-tag type="danger">
            {{ scope.row.severe }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="outside" label="境外输入">
        <template v-slot="scope">
          <el-tag type="warning">
            {{ scope.row.outside }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        fixed="right"
        prop="inputTime"
        label="录入时间"
        width="150"
      >
        <template v-slot="scope">
          <div>
            {{ scope.row.inputTime | dateFMT }}
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="obj.pageSize"
      :current-page="obj.page"
      :total="dataSearch.total"
      @current-change="change_page"
    >
    </el-pagination>
  </div>
</template>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

<script>
// 从vuex中导入辅助函数
// 辅助函数：帮助我们快速获取状态机中的变量或则方法
import pca from "../../assets/pca.json";
import { mapActions, mapState } from "vuex";
import moment from "moment";
export default {
  filters: {
    dateFMT(str) {
      return moment(str).format("YYYY-MM-DD");
    },
  },
  // 计算属性
  computed: {
    // 从dataSearch.JS文件中获取page_query变量
    ...mapState("dataSearch", ["dataSearch"]),
  },
  watch: {
    obj: {
      handler: function () {
        this.page_query(this.obj);
      },
      deep: true,
    },
  },
  data() {
       var checkNum = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("输入数据不能为空！"));
      }
    };
    return {
        rules: {
        province: [{ validator: checkNum, trigger: "blur" }],
        city: [{ validator: checkNum, trigger: "blur" }],
        area: [{ validator: checkNum, trigger: "blur" }],
        inputTime: [{ validator: checkNum, trigger: "blur" }],
      },
        pca,
      // 初始化一个参数
      obj: {
        page: 1,
        pageSize: 10,
      },
      total: 100,
    };
  },
  created() {
    this.page_query(this.obj);
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex / 2 === 1) {
        return "warning-row";
      } else if (rowIndex / 2 === 0) {
        return "success-row";
      }
      return "";
    },

    // 从dataSearch.js文件中获取page_query方法
    ...mapActions("dataSearch", ["page_query"]),
    change_page(val) {
      this.obj.page = val;
      this.total;
    },
  },
};
</script>